<template>
	<div class="wy-main business-car-manage">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >管理我的驾驶员</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<div>
			<a-input style="width: 140px;" maxLength="20"  v-model="driverName" placeholder="请输入驾驶员姓名"/>
			<a-input style="width: 190px;" maxLength="22"  v-model="certificatesNo" placeholder="请输入证件号"/>
			<a-input style="width: 130px;" maxLength="11" v-model="mobile" placeholder="请输入手机号"/>
			<a-button type="primary" style="margin-left: 10px;" @click="getDriverinfo">点击查询</a-button>
			<a-button style="margin-left: 10px;" @click="reset">重置信息</a-button>
			<!--<router-link to="/business/car/driveradd">
				<a-button type="primary" style="float: right;">新增驾驶员</a-button>
			</router-link>-->
			<router-link to="/business/car/driveradd">
				<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'Driver:add'">新增驾驶员</a-button>
			</router-link>
			<a-button type="primary" class="wy-m-l-10 wy-float-r"  v-hasPermission="'Driver:add2'" @click="$refs.autoError.handleShow()">新增驾驶员</a-button>
		</div>
		<div class="route_choice" id="car_driver">
			<a-table :columns="columns" :dataSource="cardata" :rowKey="record => record.driverId" :pagination="pagination" @change="handleTableChange" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
				<span slot="authenticationStatusValue" slot-scope="text, record">
					<span v-if="text == '认证中'" style="color: #F5B12E;">{{text}}</span>
				  	<span  v-if="text == '认证失败'" style="color: red;">{{text}}</span>
				  	<span v-if="text == '认证成功'" style="color: #15837A;;">{{text}}</span>
			  </span>		
				<!-- <span slot="certificatesType" slot-scope="text, record">
		             <span v-if="record.certificatesType==0">身份证</span>
		             <span v-if="record.certificatesType==1">港澳通行证</span>
		        </span>
				<span slot="authenticationStatus" slot-scope="text, record">
					<span v-if="record.authenticationStatus==1">认证中</span>
					<span v-if="record.authenticationStatus==2">认证成功</span>
					<span v-if="record.authenticationStatus==3">认证失败</span>
				</span> -->
				<span slot="action" slot-scope="text, record">
			      <a href="javascript:;" @click="seeInfo(record)">查看</a>
			      <a-divider type="vertical" v-if="record.authenticationStatusValue == '认证失败'"  />
			      <a href="javascript:;" @click="edit(record)" v-if="record.authenticationStatusValue == '认证失败'" > 修改</a>
			      <a-divider type="vertical"   />
			      <a href="javascript:;" @click='delDriver(record)' > 删除</a>
			    </span>
				<span slot="releaseDateSplit" slot-scope="text, record">
                <span v-if="!!record.createTime">{{record.createTime.split(" ")[0]}}</span>
              </span>
			</a-table>
		</div>
		<div style='margin-top: -50px;'>
			<a-button @click="delDrivers">删除所选</a-button>
		</div>
		<a-modal :title="type == 'edit' ? '编辑驾驶员信息' : '查看驾驶员信息'" :visible="visible" @cancel="handleCancel" width="900px" :maskClosable='false' :footer="null" >
			<driver-add v-if="visible"  :isSee='isSee' :datail='datail' @close="close" :type='type'></driver-add>
		</a-modal>
		<!--未认证弹窗-->
		<auto-error  ref="autoError" ></auto-error>
	</div>
</template>
<script>
	import driverAdd from './DriverAdd'
	import AutoError from '@/components/dialog/AutoError'
	const columns = [{
		title: '姓名',
		dataIndex: 'driverName',
		key: '2',
		width: 100,
	}, {
		title: '证件类型',
		dataIndex: 'certificatesTypeValue',
		key: '3',
		width: 100,
	}, {
		title: '证件号',
		dataIndex: 'certificatesNo',
		key: '4',
		width: 160,
	}, {
		title: '手机号',
		dataIndex: 'mobile',
		key: '5',
		width: 120,
	}, {
		title: '居住地址',
		dataIndex: 'address',
		key: '7',
		width: 150,
	}, {
		title: '认证状态',
		dataIndex: 'authenticationStatusValue',
		scopedSlots: {
		 	customRender: 'authenticationStatusValue'
		},
		key: '8',
		width: 100,
	}, {
		title: '注册日期',
		dataIndex: 'createTime',
		scopedSlots:{
			customRender: 'releaseDateSplit'
		},
		key: '9',
		width: 120,
	}, {
		title: '操作',
		key: '0',
		scopedSlots: {
			customRender: 'action'
		},
		width: 140,
	}];

	export default {
		data() {
			return {
				isSee:true,
				driverName:'',
				certificatesNo:'',
				mobile:'',
				type:'',
				datail:{},
				visible:false,
				cardata:[],
				columns,
				loading: false,
				pagination: {
				  pageSizeOptions: ['10', '20', '30', '40', '100'],
				  defaultCurrent: 1,
				  defaultPageSize: 10,
				  total:0,
				  showSizeChanger: true,
				  showTotal: (total, range) => `共 ${total} 条记录`
				},
				form: this.$form.createForm(this),
			    selectedRowKeys: [],
			}
		},
		computed: {
		},
		beforeCreate() {},
		created() {
			this.getDriverinfo()
		},
		components: {
			driverAdd,
			AutoError
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			//重置
			reset(){
				this.driverName = ''
				this.certificatesNo =''
				this.mobile = ''
				this.getDriverinfo()
			},
			// 修改完成关闭查询
			close(){
				this.visible = false
				this.getDriverinfo()
			},
			// 关闭弹窗
			handleCancel() {
				this.visible = false
			},
			// 查看货物信息
			seeInfo(data){
				this.visible = true
				this.datail = data
				this.type = 'info'
				this.isSee = true
			},
			// 编辑货物信息
			edit(data){
				this.type = 'edit'
				this.visible = true
				this.datail = data
				this.isSee = false
			},
			// 删除多条信息
			delDrivers(){
				 if (!this.selectedRowKeys.length) {
				  this.$message.warning('请选择需要删除的记录')
				  return
				}
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = []
				    for (let key of that.selectedRowKeys) {
				      logIds.push(key)
				    }

					that.$delete('/info/infoDriver/' + logIds.join(',')).then(() => {
					  that.$message.success('删除成功')
					  that.selectedRowKeys = []
					  that.getDriverinfo()
					})
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 删除单条信息
			delDriver(data){
				console.log(data)
				let that = this
				this.$confirm({
				  title: '确定删除所选中的记录?',
				  content: '当您点击确定按钮后，这些记录将会被彻底删除',
				  centered: true,
				  onOk () {
				    let logIds = []
				    logIds.push(data.driverId)
				    that.$delete('/info/infoDriver/' + logIds.join(',')).then(() => {
				      that.$message.success('删除成功')
				      that.selectedRowKeys = []
				      that.getDriverinfo()
				    })
				  },
				  onCancel () {
				    that.selectedRowKeys = []
				  }
				})
			},
			// 获取驾驶人信息列表
			getDriverinfo(params={}){
				params.pageSize = this.pagination.defaultPageSize
				params.pageNum = this.pagination.defaultCurrent
				params.driverName = this.driverName
				params.certificatesNo = this.certificatesNo
				params.mobile = this.mobile
				this.$get('/info/infoDriver', params).then((r) => {
					console.log(r)
					this.cardata = r.data.data.rows
					this.pagination.total = r.data.data.total
				})
			},
			// 全选事件
			onSelectChange (selectedRowKeys) {
		      console.log('selectedRowKeys changed: ', selectedRowKeys);
		      this.selectedRowKeys = selectedRowKeys
		    },
			// 表格排序 分页 筛选事件
			handleTableChange (pagination, filters, sorter) {
				this.pagination.defaultPageSize = pagination.pageSize
				this.pagination.defaultCurrent = pagination.current
			   	this.getDriverinfo()
			},
		}
	}
</script>

<style lang="less" scoped>
	.business-car-manage {
		.route_choice {
			margin-top: 20px;
		}
	}

</style>